<template>
  <Select :multiple="multiple" :disabled="disabled" :model-value="modelValue" :datas="data" @change="change"
    @input="input" >
    <template v-slot:top>
      <h-search @search="search" @input="searchInput" block v-model="filter" :height="30" placeholder="搜索"></h-search>
    </template>
    <template v-slot:bottom>
      <Button icon="h-icon-left" :no-border="true" @click="up"></Button>
      <span class="gray-color">{{ page }}</span>
      <Button icon="h-icon-right" :no-border="true" @click="down"></Button>
    </template>
  </Select>
</template>
<script>

export default {
  name: "PaasPageSelect",
  props: {
    multiple: {
      default: false,
    },
    disabled: {
      default: false,
    },
    modelValue: {
    },
    url: "",
    vars: {},
  },
  computed: {
    action() {
      return this.$store.forms.action;
    },
  },
  mounted() {
    if (!!this.modelValue) {
      if (this.modelValue instanceof String && this.modelValue.indexOf(",") != -1) {
        this.modelValue = this.modelValue.split(",");
      }
      if (this.multiple && this.modelValue instanceof Array) {
        this.selected = this.modelValue;
      } else {
        this.selected = [this.modelValue];
      }
    } else {
      if (this.multiple && this.modelValue instanceof Array) {
        this.selected = "";
      } else {
        this.selected = [];
      }
    }
    if (this.action != "edit" && this.action != "see") {
      this.loadData();
    }
  },
  watch: {
    vars: {
      deep: true,
      handler(newValue) {
        if (!!newValue) {
          this.selected = [];
          this.filter = "";
          this.initFlag = false;
          this.loadData();
        }
      },
    },
    modelValue: {
      deep: true,
      handler(newValue) {
        if (!!newValue) {
          if ((newValue instanceof String) && newValue.indexOf(",") != -1) {
            newValue = newValue.split(",");
          }
          if (this.multiple && newValue instanceof Array) {
            this.selected = newValue;
          } else {
            this.selected = [this.modelValue];
          }
          if (this.initFlag) {
            this.initFlag = false;
            this.loadData();
          }
        }
      },
    }
  },
  data() {
    return {
      initFlag: true,
      page: 1,
      size: 1000,
      data: [],
      selected: [],
      filter: "",
    };
  },

  methods: {
    searchInput(data) {
      if (data.length < 1) {
        return;
      }
      this.search(data);
    },
    search(data) {
      this.current = 1;
      this.loadData();
    },
    input(data) {
      this.selected = [];
      if (!!this.multiple && data instanceof Array) {
        this.selected = data;
      }

      this.$emit("update:modelValue", data);
      this.$emit("input", data);
    },
    change(data) {
      let value = new Array();
      if (!!this.multiple) {
        for (let i = 0; i < data.length; i++) {
          value.push(data[i].value);
        }
      } else if (!!data) {
        value = data.value;
      } else {
        value = ""
      }
      this.$emit("update:modelValue", value);
      this.$emit("change", data);
    },
    loadData() {
      if (!!this.selected && this.selected.length > 1) {
        this.size = 20;
      }
      let params = {
        page: {
          current: this.page,
          size: this.size + this.selected.length,
        },
        label: this.filter,
        vars: this.vars,
        selected: this.selected,
      };
      this.$post(this.url, params).then((res) => {
        let data = res.data.data;
        if (!data) {
          return;
        }
        this.data = data.rows;
      });
    },
    up() {
      if (this.page > 1) {
        this.page--;
        this.loadData();
      }
    },
    down() {
      this.page++;
      this.loadData();
    },
  },
};
</script>